<template>
	<view class="FootBar flex-between">
		<view class="flex" v-for="(i,ind) in barList" :key="ind" @click="barItem(i)" :class="i.id==num?'curr':''">
			<image :src="i.icon"></image>
			<text>{{i.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				backTop: "",
				barList: [{
						name: "创作圈",
						icon: require("../static/tabbar/discover1.png"),
						id: 1,
						path: "/pages/hypermarket/artworkList",
					},
					{
						name: "商城",
						icon: require("../static/tabbar/hypermarket1.png"),
						id: 2,
						path: "/pages/hypermarket/hypermarket"
					},
					{
						name: "开始创作",
						icon: require("../static/tabbar/choose_index.png"),
						id: 3,
						path: "/pages/index/choose"

					},
					{
						name: "购物车",
						icon: require("../static/tabbar/shopping_cart1.png"),
						id: 4,
						path: "/pages/shoppingCart/shoppingCart"

					},
					{
						name: "我的",
						icon: require("../static/tabbar/mine1.png"),
						id: 5,
						path: "/pages/mine/mine"
					},
				],
				num: 0
			}
		},
		mounted: function() {
			this.backTop = uni.getStorageSync("backTop") || "";
			this.num = uni.getStorageSync("footNum") || 1;

		},
		methods: {
			//返回
			goBack() {
				uni.redirectTo({
					//保留当前页面，跳转到应用内的某个页面
					url: this.backUrl
				})
			},
			//点击footBar
			barItem(i) {
				this.num = i.id;
				uni.setStorageSync("footNum", i.id);
				if (i.path) {
					uni.redirectTo({
						//保留当前页面，跳转到应用内的某个页面
						url: i.path
					})
				}
			}

		},
	}
</script>

<style lang="scss" scoped>
	.FootBar {
		color: rgba(140, 111, 111, 1);
		width: 100%;
		position: fixed;
		bottom: 0;
		left:0;
		height: 160rpx;
		background: #fff;

		.curr {
			color: #D7A06E;
		}

		>view {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 25%;

			>image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 14rpx;
			}

			font-size: 20rpx;
			text-align: center;
		}
	}
</style>
